<!--
 * @Description: 
 * @Date: 2023-02-23 18:07:17
 * @LastEditors: czp
 * @LastEditTime: 2023-04-21 14:45:38
-->
<template>
	<div class="zhi-nan">
		<!-- 概况 -->
		<div class="nav">
			<div class="nav-left">
				<div class="nav-info">
					武隆地处重庆市东南部乌江下游，境内公路、铁路、水路等交通便捷，仙女山机场已于2021年实现通航。武隆生态十分优良，旅游资源非常富集，全区现存旅游资源单体700余处，被誉为“世界喀斯特生态博物馆”，是“中国优秀旅游城区”，更是全国同时拥有“世界自然遗产”、“国家5A级旅游景区”、“国家级旅游度假区”、“国家全域旅游示范区”、“最佳旅游乡村”五块金字招牌的重要旅游目的地。目前已开发的主要景区有9个：仙女山国家森林公园、天生三桥、龙水峡地缝、芙蓉洞、芙蓉江、白马山天尺情缘、天坑寨子、懒坝国际艺术度假区、归原小镇等。武隆被中央电视台、《人民日报》等誉为“绿色崛起”的典型地区，荣获联合国“可持续发展城市范例奖”等多项荣誉。
				</div>
				<div class="nav-icon">
					<div class="icon-item-box" v-for="(i, index) in icon" :key="index" @click="changeIcon(i)">
						<img v-if="i.id == 0" class="icon-img" :src="i.iconChange" alt="" />
						<img v-else class="icon-img" :src="i.icon" alt="" />
						<a class="icon-text">{{ i.title }}</a>
					</div>
				</div>
			</div>
			<img class="nav-right" :src="cosPrefix + 'two-level/xiangye/i3.jpg?imageMogr2/thumbnail/750x'" alt="" />
		</div>
		<div class="shop-list" v-if="activeIconIndex !== -1">
			<div class="shop" v-for="(item, index) in icon[activeIconIndex].details" :key="index">
				<div class="info">
					<!-- <div class="title">{{ item.name }}</div> -->

					<div class="content" v-if="item.id == 0.0">
						一、国外旅客来重庆武隆旅游，可选择开通直飞重庆航班的国外城市直达重庆江北机场，或先飞往中国国内其他大城市再转机再飞往重庆。到达重庆江北机场后可以换乘火车或者换乘大巴到达武隆。重庆江北国际机场，距离市中心19公里，为4F级民用国际机场。截至2018年底，共开通国内外航线329条，通航城市203个。<br />二、武隆仙女山机场已开通杭州、济南、上海、成都、重庆（市内航线）等城市航班。国外游客可以飞往中国以上城市，再转飞武隆仙女山机场。武隆仙女山机场是重庆市“一大四小”机场群中最后通航的一座机场，于2020年12月完成首航开通运营。
					</div>
					<p class="content content-text" v-if="item.id == 3.3">
						<span>1、当您完成了护照检查后，请携带您所有的行李（包括托运行李），自行选择通道通关。 </span>
						<span>2、在选择海关通道前，请先了解清楚海关通关管理规定。对错选通道而引致的一切法律责任，将由旅客自行承担。</span>
						<span>3、旅客需要向海关办理申报手续的，请到海关申报台以书面形式完成。此外在任何地点以及其他任何方式的申报均视为无效。</span>
						<span>4、请您出示有效进出境证件通关。</span>
						<span>5、对旅客带有国家规定的应税物品，海关将予照章征税。请旅客持税单自行前往海关指定的银行缴纳税款。</span>
						<span>6、对携带超量或未办结海关手续的货物、物品，海关将提供暂时保管，并按规定收取保管费。</span>
					</p>
					<div class="content" v-else>
						{{ item.desc }}
					</div>
					<div class="content" v-if="item.id == 1.1">
						<img class="date" :src="cosPrefix + 'three-level/xiangye/tayouxing/jingzhuzhiinan/table.png'" alt="" />
					</div>
				</div>
				<el-image class="cover" :src="item.img" fit="cover" />
			</div>
		</div>
	</div>
</template>
<script setup lang="ts" name="JingDian">
import { useBaseStore } from "@/store/base";

const { cosPrefix } = useBaseStore();

// 图标区
const icon = [
	{
		title: "入境指南",
		id: 0,
		icon: cosPrefix + "three-level/xiangye/tayouxing/icon/zhi2.png",
		iconChange: cosPrefix + "three-level/xiangye/tayouxing/icon/zhi1.png",

		details: [
			{
				name: "入境指南",
				id: 3.3,
				desc: "",
				img: cosPrefix + "three-level/xiangye/tayouxing/jingzhuzhiinan/rujingzhinan.png"
			}
		]
	},
	{
		title: "飞机",
		id: 1,
		icon: cosPrefix + "three-level/xiangye/tayouxing/icon/fei2.png",
		iconChange: cosPrefix + "three-level/xiangye/tayouxing/icon/fei1.png",

		details: [
			{
				name: "飞机",
				id: 0.0,
				desc: "",
				img: cosPrefix + "three-level/xiangye/tayouxing/jingzhuzhiinan/feiji.png"
			}
		]
	},
	{
		title: "高铁",
		id: 2,
		icon: cosPrefix + "three-level/xiangye/tayouxing/icon/gao2.png",
		iconChange: cosPrefix + "three-level/xiangye/tayouxing/icon/gao1.png",

		details: [
			{
				name: "高铁",
				id: 1.1,
				desc: "重庆到武隆目前暂没有直达路线，推荐3条中转路线，分别为D6126转C731、D658转K9509、C6428转C731，可根据自己需求选择。",
				img: cosPrefix + "three-level/xiangye/tayouxing/jingzhuzhiinan/gaotie.png"
			}
		]
	},
	{
		title: "自驾游",
		id: 3,
		icon: cosPrefix + "three-level/xiangye/tayouxing/icon/you2.png",
		iconChange: cosPrefix + "three-level/xiangye/tayouxing/icon/you1.png",

		details: [
			{
				name: "自驾游",
				id: 2.2,
				desc: "重庆到涪陵118公里，从江北上高速，小车过路费90元，路况平整，安全系数高，但是仍需要注意路旁的限速标志，涪陵到武隆为高等级公路，行程68公里，过路费40元，由于是沿江修建的高等级公路，需注意限速标志；重庆走渝湘高速（高速路段约160KM,车程约2小时）抵达武隆。",
				img: cosPrefix + "three-level/xiangye/tayouxing/jingzhuzhiinan/zijiayou.png"
			}
		]
	}
];
const activeIconIndex = ref(0);
// click切换图片
const changeIcon = (item: { id: number; iconChange: string; icon: string }) => {
	activeIconIndex.value = item.id;
	const list = document.getElementsByClassName("icon-img");
	const newSrc = item.iconChange;
	list[item.id].setAttribute("src", newSrc);
	for (let i = 0; i < list.length; i++) {
		if (item.id == i) {
			list[item.id].setAttribute("src", newSrc);
		} else {
			for (let j = 0; j < icon.length; j++) {
				const oldSrc = icon[j].icon;
				if (i == j) {
					list[i].setAttribute("src", oldSrc);
				}
			}
		}
	}
};
</script>
<style lang="scss" scoped>
.zhi-nan {
	padding: 40px 320px;
}
.nav {
	position: relative;
	display: flex;
	justify-content: space-between;
	width: 100%;
	height: 348px;
	overflow: hidden;
	font-size: 16px;
	background-color: #f8f8f8;
	.nav-left {
		flex: 1;
		.nav-info {
			position: absolute;
			top: 40px;
			left: 40px;
			width: 821px;
			font-size: 16px;
			line-height: 25px;
		}
		.nav-icon {
			position: absolute;
			bottom: 40px;
			left: 40px;
			display: flex;
			justify-content: space-between;
			width: 428px;
			.icon-item-box {
				display: flex;
				flex-direction: column;
				align-items: center;
				font-size: 18px;
				color: $theme-color;
				cursor: pointer;
				&:hover .icon-text {
					color: #8a1313;
				}
				&:active .icon-text {
					color: $theme-color;
				}
				img {
					width: 64px;
					height: 64px;
				}
				a.icon-text {
					padding: 0 20px;
					border-right: 1px solid #bbbbbb;
					transition: all linear 0.3s;
					&:last-child {
						border-right: none;
					}
				}
			}
		}
	}
	.nav-right {
		width: 420px;
		height: 348px;
		object-fit: contain;
	}
}
.shop-list {
	.shop {
		display: flex;
		margin-top: 40px;
		.cover {
			width: 380px;
			height: 240px;
		}
		.info {
			display: flex;
			flex: 1;
			flex-direction: column;
			padding-left: 40px;
			.title {
				margin-bottom: 20px;
				font-size: 20px;
				font-weight: bold;
				color: rgb(25 25 25 / 100%);
			}
			.content {
				margin-right: 40px;
				font-size: 16px;
				line-height: 30px;
				color: rgb(102 102 102 / 100%);
				&.content-text {
					display: flex;
					flex-direction: column;
				}
			}
			.btn {
				width: 116px;
			}
		}
	}
}
.recommend-box {
	margin: 40px 0;
	.recommend-title {
		margin-bottom: 40px;
		font-size: 24px;
		text-align: center;
	}
	.pagination-box {
		display: flex;
		justify-content: center;
		:deep(.el-pagination) {
			.is-active {
				background-color: $theme-color;
			}
		}
	}
	.video-box {
		.list {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			.list-item {
				display: flex;
				flex-direction: column;
				margin-bottom: 40px;
				border: 1px solid #dbdbdb;
				.el-image {
					width: 305px;
					height: 222px;
				}
				.text {
					padding: 20px;
					font-size: 16px;
				}
			}
		}
	}
	.recommend-item-box {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		width: 100%;
		padding-bottom: 10px;
		overflow: hidden;
		overflow-x: scroll;
		&::-webkit-scrollbar {
			/* 滚动条整体样式 */
			height: 6px;
			cursor: pointer;
		}
		&::-webkit-scrollbar-thumb {
			cursor: pointer;
			background-color: rgba($color: #252525, $alpha: 10%);

			/* 滚动条里面小方块 */
			border-radius: 10px;
		}
		&::-webkit-scrollbar-track {
			cursor: pointer;

			/* 滚动条里面轨道 */
			background: transparent;
			border-radius: 10px;
		}
		.recommend-item {
			display: flex;
			flex-direction: column;
			margin-right: 20px;
			border: 1px solid #dbdbdb;
			img {
				width: 413px;
				height: 248px;
			}
			.item-text-box {
				padding: 20px;
				.item-text {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding-bottom: 20px;
					span {
						font-size: 24px;
					}
					button {
						height: 28px;
						font-size: 14px;
						color: #8a1313;
						cursor: pointer;
						background-color: transparent;
						border: 1px solid #8a1313;
						outline: none;
					}
					.desc {
						font-size: 14px;
						line-height: 24px;
					}
				}
			}
		}
	}
}

@media all and (max-width: 750px) {
	.zhi-nan {
		padding: 16px;
	}
	.nav {
		flex-direction: column-reverse;
		justify-content: flex-end;
		height: auto;
		padding: 16px;
		.nav-left {
			.nav-info {
				position: static;
				width: auto;
				text-indent: 2rem;
			}
			.nav-icon {
				position: static;
			}
		}
		.nav-right {
			width: 100%;
			margin-bottom: 16px;
		}
	}
	.shop-list {
		.shop {
			flex-direction: column;
			align-items: center;
			.info {
				width: 100%;
				padding-left: 0;
				.content {
					margin-right: 0;
				}
			}
			.cover {
				width: 100%;
				height: auto;
			}
			.date {
				width: 100%;
			}
		}
	}
}
</style>
